$(document).ready(function () {
    $('#fullSection').fullpage({
        sectionsColor: ['cadetblue', '#C2E5FF', '#FDF6E1', '#E9E9E9'],
        scrollingSpeed: 1400,
        afterLoad: function (anchorLink, index) {
            if (index.index === 0) {
                $('.page1 .dh').animate({
                    right: '0'
                }, 1500);
                $('.page1 .logo').animate({
                    left: '30px'
                }, 1500);
                $('.screen_main span').each(function () {
                    var $rel = $(this).attr('rel');
                    var $arr = $rel.split(',');
                    $(this).animate({
                        left: $arr[2] + 'px',
                        top: $arr[3] + 'px'
                    }, 1000);
                });
            }
            if (index.index === 1 || index.index === 2 || index.index === 3 || index.index === 4) {
                $('.inner').eq(index.index - 1).find('a').each(function () {
                    var $rel = $(this).attr('rel');
                    var $arr = $rel.split(',');
                    $(this).animate({
                        left: $arr[2] + 'px',
                        top: $arr[3] + 'px'
                    }, 1000);
                });
            }
            if (index.index === 1){
                $('.page2 .dh').animate({
                    right: '0'
                }, 1500);
                $('.page2 .logo').animate({
                    left: '30px'
                }, 1500);
            } else if (index.index === 2){
                $('.page3 .dh').animate({
                    right: '0'
                }, 1500);
                $('.page3 .logo').animate({
                    left: '30px'
                }, 1500);
            } else if (index.index === 3){
                $('.page4 .dh').animate({
                    right: '0'
                }, 1500);
                $('.page4 .logo').animate({
                    left: '30px'
                }, 1500);
            } else if (index.index === 4){
                $('.page5 .dh').animate({
                    right: '0'
                }, 1500);
                $('.page5 .logo').animate({
                    left: '30px'
                }, 1500);
            }
        },

        onLeave: function (index, direction) {
            if (index.index === 0) {
                $('.page1 .dh').animate({
                    right: '-100%'
                }, 1500);
                $('.page1 .logo').animate({
                    left: '-130px'
                }, 1500);
                $('.screen_main span').each(function () {
                    var $rel = $(this).attr('rel');
                    var $arr = $rel.split(',');
                    $(this).animate({
                        left: $arr[0] + 'px',
                        top: $arr[1] + 'px'
                    }, 800);
                });
            }
            if (index.index === 1 || index.index === 2 || index.index === 3 || index.index === 4) {
                $('.inner').eq(index.index - 1).find('a').each(function () {
                    var $rel = $(this).attr('rel');
                    var $arr = $rel.split(',');
                    $(this).animate({
                        left: $arr[0] + 'px',
                        top: $arr[1] + 'px'
                    }, 1000);
                });
            }
            if (index.index === 1){
                $('.page2 .dh').animate({
                    right: '-100%'
                }, 1500);
                $('.page2 .logo').animate({
                    left: '-130px'
                }, 1500);
            } else if (index.index === 2){
                $('.page3 .dh').animate({
                    right: '-100%'
                }, 1500);
                $('.page3 .logo').animate({
                    left: '-130px'
                }, 1500);
            } else if (index.index === 3){
                $('.page4 .dh').animate({
                    right: '-100%'
                }, 1500);
                $('.page4 .logo').animate({
                    left: '-130px'
                }, 1500);
            } else if (index.index === 4){
                $('.page5 .dh').animate({
                    right: '-100%'
                }, 1500);
                $('.page5 .logo').animate({
                    left: '-130px'
                }, 1500);
            }
        }
    });

});